<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文章阅读 | 码上知道</title>

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<link rel="shortcut icon " type="images/x-icon" href="image/favicon.ico" />
		<link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="vendor/Editor.md/css/editormd.preview.min.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/showArticle.css" rel="stylesheet" />

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
		<!--markdown解析成html需要引入额外的js文件-->
		<script src="vendor/Editor.md/lib/marked.min.js"></script>
		<script src="vendor/Editor.md/lib/prettify.min.js"></script>
		<script src="vendor/Editor.md/lib/raphael.min.js"></script>
		<script src="vendor/Editor.md/lib/underscore.min.js"></script>
		<script src="vendor/Editor.md/lib/sequence-diagram.min.js"></script>
		<script src="vendor/Editor.md/lib/flowchart.min.js"></script>
		<script src="vendor/Editor.md/lib/jquery.flowchart.min.js"></script>
		<script src="vendor/Editor.md/editormd.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/showArticle.js"></script>
	</head>
	<body>
		<div id="sidebar" class="ui left sidebar thin vertical inverted menu">
			<div id="sidebaruser" class="item">
				<div id="sidebarheadphoto">
				</div>
				<div id="sidebarlogintips">
					您还未登录<br />请<a class="logintrigger" href="javascript:void(0);">&nbsp;登录&nbsp;</a>或<a href="register.html">&nbsp;注册&nbsp;</a>
				</div>
			</div>
			<a class="item" href="index.html">
				首页<i class="fas fa-home icon"></i>
			</a>
			<a class="item" href="index.html">
				看问答<i class="fas fa-comments icon"></i>
			</a>
			<a class="item" href="article.html">
				看文章<i class="fas fa-book icon"></i>
			</a>
			<a class="item" href="https://github.com/jxzhangaoran/mszdqabbs">
				关于网站<i class="fas fa-rss icon"></i>
			</a>
			<a class="item" href="https://github.com/jxzhangaoran">
				关于作者<i class="fas fa-at icon"></i>
			</a>
			<a class="item mobilelogined loginhidden" href="invite.html">
				邀请回答<span class="inviteNumber">0</span><i class="envelope outline icon"></i>
			</a>
			<a class="item mobilelogined loginhidden" href="me.html">
				我的<i class="user icon"></i>
			</a>
			<a class="item mobilelogined loginhidden" href="javascript:void(0)" id="mobilecancellogin">
				注销登录<i class="power off icon"></i>
			</a>
			<div id="sidebarlogocontainer" class="item" style="	border-bottom: none !important;">
				<div id="sidebarlogo">
				</div>
				<div id="sidebarlogotips">
					2020<br />By @Matsk
				</div>
			</div>
		</div>
		<div class="dimmed pusher">
			<header>
				<div class="ui borderless main menu fixed">
					<a href="javascript:void(0)" id="togglePusher" class="item showhigherthan900">
						<i class="fa fa-bars"></i>
					</a>
					<div class="ui text container" style="max-width: 700px !important;">
						<div href="#" class="header item">
							<img src="image/logo.png" id="navlogo" style="height: 30px; width: auto;cursor: pointer;" alt="码上知道" />
						</div>
						<div class="right menu">
							<a href="index.html" class="item hidelowerthan900"><i class="fas fa-comments icon"></i>&nbsp;看问答</a>
							<a href="article.html" class="item hidelowerthan900"><i class="fas fa-book icon"></i>&nbsp;看文章</a>
							<div class="ui simple dropdown item hidelowerthan900">
								更多 <i class="dropdown icon"></i>
								<div class="menu">
									<a class="item" href="https://github.com/jxzhangaoran/mszdqabbs"><i class="fas fa-rss icon"></i>&nbsp;关于网站</a>
									<a class="item" href="https://github.com/jxzhangaoran"><i class="fas fa-at icon"></i>&nbsp;关于作者</a>
								</div>
							</div>
							<div id="search" class="item ui search">
								<div class="ui icon input">
									<i class="search link icon " id="searchicon"></i>
									<input type="text" class="prompt" placeholder="用户/问答/文章">
								</div>
							</div>
						</div>
						<div id="headphotoitem" class="item hidelowerthan900" style="position: absolute; right: 30px; margin-top: -2.5px;">
							<div id="headphotocontainer" style="width: 40px;
						height: 40px;
						border: 1.5px solid dimgray;
						margin-top: -6px;
						border-radius: 50% !important;
						background-image: url(image/default_headphoto.png);
						background-size: 100% 100%;
						background-position: center;
						background-repeat: no-repeat;">
							<i class="circle icon msgTipRedPoint"></i>
							</div>
							<div id="usertips" class="ui custom popup top left transition hidden">
								<div id="notlogin">
									您还未登录<br />请<a class="logintrigger" href="javascript:void(0);">&nbsp;登录&nbsp;</a>或<a href="register.html">&nbsp;注册&nbsp;</a>
								</div>
								<div id="logined" class="loginhidden">
									<div class="usernamediv">
										欢迎回来<br /><span id="usernameinfo"></span>
									</div>
									<div class="ui divider"></div>
									<div class="ui vertical pointing menu">
										<a class="item" href="invite.html">
											邀请回答<span class="inviteNumber" style="margin-left: 1em;">0</span><i class="envelope outline icon" style="margin-top: 0.2em"></i>
										</a>
										<a class="item" href="me.html">
											我的<i class="user icon"></i>
										</a>
										<a class="item" id="pccancellogin">
											注销<i class="power off icon"></i>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="ui modal" id="loginmodal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						欢迎
					</div>
					<div class="content" style="text-align: center;">
						<form class="ui form" id="loginform">
							<div class="ui stacked segment">
								<div class="field" id="usernamefield">
									<div class="ui left icon input">
										<i class="address card icon"></i>
										<input id="usernameinput" type="text" name="username" placeholder="用户名或电子邮箱" autocomplete="off" />
									</div>
								</div>
								<div class="field" id="passwordfield">
									<div class="ui left icon input">
										<i class="key icon"></i>
										<input id="passwordinput" type="password" name="password" placeholder="密码" autocomplete="off" />
									</div>
								</div>
								<div class="inline field" style="text-align: left;">
									<label data-tooltip="请尝试找回密码或联系QQ:1004529325." data-position="top center"><i class="question circle outline icon"></i>登录遇到问题？</label>
									<a style="float: right;" href="javascript:void(0);" id="getBackPassword">找回密码</a>
								</div>
								<div class="inline field" style="text-align: left;">
									<label><i class="question circle outline icon"></i>新用户？</label>
									<a style="float: right;" href="javascript:void(0);" id="goRegister">注册账号</a>
								</div>
								<div class="ui fluid large blue submit button" id="loginbtn">登录</div>
							</div>
							<div class="ui error message" id="loginerrorlist">
								<ul class="list">

								</ul>
							</div>
						</form>
					</div>
				</div>
				<!-- 找回密码 -->
				<div class="ui modal" id="findPasswordModal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						请输入您注册时的邮箱
					</div>
					<div class="content" style="text-align: center;">
						<form class="ui form">
							<div class="ui stacked segment">
								<div class="field" id="findpasswordfield">
									<div class="ui left icon input">
										<i class="envelope open icon"></i>
										<input id="findpasswordemailinput" type="text" name="findpasswordemail" placeholder="example@abc.com"
										 autocomplete="off" />
									</div>
								</div>
								<div class="field" id="findpasswordverifycodefield" style="display: none;">
									<div class="ui left icon input">
										<i class="code icon"></i>
										<input id="findpasswordverifycodeinput" type="text" name="findpasswordverifycode" placeholder="6位数字验证码"
										 autocomplete="off" />
									</div>
								</div>
								<div class="field" id="findpasswordinputfield" style="display: none;">
									<div class="ui left icon input">
										<i class="lock icon"></i>
										<input id="newpasswordinput" type="password" name="newpassword" placeholder="包含字母和数字，6-20位" autocomplete="off" />
									</div>
								</div>
								<div class="ui fluid large blue button" id="findpasswordbtn" style="font-size: 1em;">找回密码</div>
								<div class="ui fluid large blue button disabled" id="findpasswordbtn_step2" style="font-size: 1em;display:none">下一步</div>
								<div class="ui fluid large blue button disabled" id="findpasswordbtn_step3" style="font-size: 1em;display:none">确认修改</div>
							</div>
							<div class="ui error message" id="findpassworderrorlist">
								<ul class="list">

								</ul>
							</div>
						</form>
					</div>
				</div>
				<!-- 成功修改提示模态框 -->
				<div class="ui modal" id="success_modal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						恭喜你，提交成功啦
					</div>
					<div class="content" style="text-align: center;">
						<img src="image/success.png" class="tip_modal_pic" />
					</div>
					<div class="actions">
						<div id="success_modal_ok" class="ui positive right labeled icon button">
							好的
							<i class="checkmark icon"></i>
						</div>
					</div>
				</div>
				<!-- 失败修改提示模态框 -->
				<div class="ui modal" id="failed_modal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						抱歉，出了点问题
					</div>
					<div class="content" style="text-align: center;">
						<img src="image/failed.png" class="tip_modal_pic" />
					</div>
					<div class="actions">
						<div id="failed_modal_ok" class="ui negative right labeled icon button">
							好吧
							<i class="checkmark icon"></i>
						</div>
					</div>
				</div>
			</header>

			<main style="margin-top: 5em;">
				<div class="ui container">
					<div class="ui four stackable column grid">
						<div class="mobile only sixteen wide column" id="mobiletop">
							<div class="mobile_authorHeadPhoto">
								<img src="image/default_headphoto.png" alt="用户头像" />
							</div>
							<div class="mobile_authorBasicInfo">
								<p class="authorName">作者名字</p>
								<p class="authorMotto"><i class="pencil alternate icon"></i><span class="mottoWord">作者个性签名</span></p>
							</div>
							<div class="mobile_authorFollowTA">
								<button class="ui blue button followTA"><i class="plus square outline icon"></i>关注TA</button>
							</div>
							<div class="ui divider"></div>
						</div>
						<!-- 页面左侧主体部分 -->
						<div class="eleven wide column">
							<div class="ui">
								<!-- 头部，文章标题 -->
								<div class="articleTop">
									<div class="articleTitle">
										<h1>文章标题</h1>
									</div>
									<div class="ui divider"></div>
									<div class="ui fluid placeholder loadingHolder">
										<div class="paragraph">
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
										</div>
										<div class="paragraph">
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
										</div>
									</div>
									<div class="ui placeholder loadingHolder">
										<div class="paragraph">
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
										</div>
										<div class="paragraph">
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
										</div>
									</div>
									<div class="ui placeholder loadingHolder">
										<div class="paragraph">
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
										</div>
										<div class="paragraph">
											<div class="line"></div>
											<div class="line"></div>
											<div class="line"></div>
										</div>
									</div>
									<div class="articleBody" id="mainContent">
										<textarea style='display:none;'></textarea>
									</div>
									  
									<div class="articleActions fixedActions">
										<div class="ui labeled button like_outer" tabindex="0">
											<div class="ui red button like">
												<i class="heart icon"></i><span class="likeWord">赞同</span>
											</div>
											<a class="ui basic red left pointing label like_count">
												0
											</a>
										</div>
										<div class="ui basic blue button dislike">
											<i class="thumbs down outline icon"></i><span class="dislikeWord">踩</span>
										</div>
										<div class="collectionAndComment">
											<div class="collection">
												<span class="actionIcons" id="collectFixed"><i class="star outline icon"></i>收藏&nbsp;<span class="collectionCountValue">99+</span></span>
												<!-- 点击收藏，弹出提示框 -->
												<div class="ui popup" id="collectionPopupFixed" style="text-align: center;position: fixed;bottom: 5em">
													<div class="addCollection" style="text-align: center;">
														<div class="header">添加到收藏吗？</div>
														<br />
														<button class="ui blue button addCollectionBtn" style="margin-top: 1em;"><i class="plus icon" style="color: white;"></i>收藏</button>
													</div>
													<div class="cancelCollection" style="display: none;text-align: center;">
														<div class="header">已收藏此文章</div>
														<br />
														<button class="ui red button cancelCollectionBtn" style="margin-top: 1em;"><i class="times icon" style="color: white;"></i>取消收藏</button>
													</div>
												</div>
											</div>
											<div class="comment">
												<span class="actionIcons clickToSlideToComment"><i class="comment outline icon"></i>评论&nbsp;<span class="commentCountValue">99+</span></span>
											</div>
										</div>
									</div>
									
									<!-- 点赞、踩、收藏、跳到评论 -->
									<div class="articleActions" id="checkReachBottom">
										<div class="ui labeled button like_outer" tabindex="0">
											<div class="ui red button like">
												<i class="heart icon"></i><span class="likeWord">赞同</span>
											</div>
											<a class="ui basic red left pointing label like_count">
												0
											</a>
										</div>
										<div class="ui basic blue button dislike">
											<i class="thumbs down outline icon"></i><span class="dislikeWord">踩</span>
										</div>
										<div class="collectionAndComment">
											<div class="collection">
												<span class="actionIcons" id="collectNotFixed"><i class="star outline icon"></i>收藏&nbsp;<span class="collectionCountValue">0</span></span>
											</div>
											<div class="comment">
												<span class="actionIcons clickToSlideToComment"><i class="comment outline icon"></i>评论&nbsp;<span class="commentCountValue">0</span></span>
											</div>
										</div>
									</div>
									<!-- 点击收藏，弹出提示框 -->
									<div class="ui popup" id="collectionPopup" style="text-align: center;">
										<div class="addCollection">
											<div class="header">添加到收藏吗？</div>
											<button class="ui blue button addCollectionBtn" style="margin-top: 1em;"><i class="plus icon" style="color: white;"></i>收藏</button>
										</div>
										<div class="cancelCollection" style="display: none;">
											<div class="header">已收藏此文章</div>
											<button class="ui red button cancelCollectionBtn" style="margin-top: 1em;"><i class="times icon" style="color: white;"></i>取消收藏</button>
										</div>
									</div>
								</div>
								<div class="ui divider"></div>
								<!-- 尾部，包含文章发布时间、最后修改时间信息 -->
								<div class="articleBottom">
									<div class="lastUpdateTime" style="display: none;"><i class="hourglass outline icon"></i>修改于&nbsp;<span class="lastUpdateTimeValue"></span></div>
									<div class="submitTime"><i class="clock outline icon"></i>发表于&nbsp;<span class="submitTimeValue"></span></div>
									<div class="browseCount"><i class="eye icon"></i><span class="browseCountValue">被浏览次数</span></div>
								</div>
								<a name="commenttag"></a>
								<div class="commentContainer">
									<div class="commentInputTextarea">
										<div class="ui form">
										  <div class="field">
										    <label class="commentWelcomeTitle"><i class="pen square icon"></i>我要评论</label>
										    <textarea rows="2" placeholder="下一个神评就是你~" class="commentInput"></textarea>
											<label class="howManyCanInput">还能输入<span class="howManyCanInputNumber">200</span>个字符</label>
											<button type="button" class="ui blue button commentSubmit disabled">发表评论</button>
										  </div>
										</div>
									</div>
									<div class="ui divider"></div>
									<!-- 无评论时显示 -->
									<div class="noCommentDiv">
										<div class="noCommentEmptyImg">
											<img src="image/empty.png" alt="无评论" />
										</div>
										<div class="noCommentWord">
											<h2>还没有评论哦，快抢沙发~</h2>
										</div>
									</div>
									<!-- 有评论时显示 -->
									<div class="hasCommentDiv">
										<div class="commentDivTemplate" style="display:none">
											<div class="commentsDiv">
												<div class="commentsHeader">
													<img class="commentatorHeadphoto" src="image/default_headphoto.png" alt="评论者头像" />
													<span class="commentatorNickname">评论者昵称评论者昵称评论者昵称评论者昵称评论者昵称评论者昵称</span>
													<span class="commentTime">评论时间</span>
												</div>
												<div class="commentsBody">
													评论正文
												</div>
												<div class="commentsFooter">
													<span class="likeSpan"><i class="thumbs up outline icon"></i><span class="likeCount">-</span></span>
													<span class="dislikeSpan"><i class="thumbs down outline icon"></i><span class="dislikeCount">-</span></span>
													<span class="replySpan"><i class="reply icon"></i>回复</span>
												</div>
												<div class="ui divider"></div>
											</div>
										</div>
										<!-- 评论列表 -->
										<div class="comments"></div>
										<!-- 有更多评论时显示 -->
										<div class="moreCommentDiv" style="display:none">
											<h3 class="clickToShowAllComments">查看所有评论<i class="angle down icon"></i></h3>
											<div class="ui active centered inline loader" style="display:none"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="five wide column">
							<div class="ui segment stackable column" id="asidetop">
								<div class="aboutAuthorTitle">
									<h3>关于作者</h3>
								</div>
								<div class="ui divider" style="margin-top: 0;margin-bottom: 0;"></div>
								<div class="authorBasicInfo">
									<img src="image/default_headphoto.png" class="authorHeadPhoto" alt="作者头像" />
									<div class="authorNameAndMotto">
										<p class="authorName">作者名字</p>
										<p class="authorMotto"><i class="pencil alternate icon"></i><span class="mottoWord">作者个性签名</span></p>
									</div>
								</div>
								<div class="ui divider" style="margin-top: 0;margin-bottom: 0;"></div>
								<div class="authorStatistics">
									<div class="authorStatistic">
										<h4>回答</h4>
										<span class="answerCount">-</span>
									</div>
									<div class="authorStatistic">
										<h4>文章</h4>
										<span class="articleCount">-</span>
									</div>
									<div class="authorStatistic">
										<h4>粉丝</h4>
										<span class="fansCount">-</span>
									</div>
								</div>
								<div class="ui divider" style="margin-top: 0;margin-bottom: 0;"></div>
								<div class="authorActions">
									<button class="ui blue button followTA"><i class="plus square outline icon"></i>关注TA</button>
									<button class="ui blue basic button goToMainPageOfTA">&nbsp;TA的主页&nbsp;</button>
								</div>
							</div>
							<div class="ui segment" id="asidebottom">
								<p><i class="rocketchat icon"></i><a href="index.html">码上知道论坛</a></p>
								<p><i class="rocketchat icon"></i><a href="index.html">Knowing Code</a></p>
								<p><i class="github icon"></i><a href="https://github.com/jxzhangaoran">GitHub</a></p>
								<p><i class="free code camp icon"></i><a href="https://gitee.com/Matsk/dashboard">码云</a></p>
								<p><i class="qq icon"></i><a href="javascript:void(0);">QQ：1004529325</a></p>
								<p><i class="wechat icon"></i><a href="javascript:void(0);">微信：jxzhangaoran</a></p>
								<div class="ui divider"></div>
								<p>&nbsp;&nbsp;感谢以下技术提供的支持</p>
								<p><a href="http://editor.md.ipandao.com/">Editor.md</a></p>
								<p><a href="https://semantic-ui.com/">Semantic&nbsp;UI&nbsp;</a>|<a href="https://spring.io/projects/spring-boot">SpringBoot</a></p>
								<p><a href="https://blog.mybatis.org/">MyBatis&nbsp;</a>|<a href="https://jwt.io/">JWT&nbsp;</a>|<a href="https://jquery.com/">jQuery</a></p>
								<p><a href="https://www.mysql.com/">MySQL</a>|<a href="https://tomcat.apache.org/">Tomcat</a></p>
								<div class="ui divider"></div>
								<p><i class="copyright outline icon"></i><a href="javascript:void(0);">2020 Made By Matsk</a></p>
								<p><i class="copyright outline icon"></i><a href="http://mtk.pub/">mtk.pub</a></p>
								<p><img src="image/beian.png" style="height: 1em;margin-left: 2px;">&nbsp;&nbsp;<a href="http://beian.miit.gov.cn/">赣ICP备20002190号</a></p>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>
